<template>
	<view class="content">
		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @touchmove.stop.prevent="moveHandle"  @click="closeSheet()">
			<scroll-view scroll-y="true"  class="sheetView"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
				<view class="title">选择支付方式</view>
				<view class="" style="padding-left: 30rpx;">
					<view class="uni-flex zhifufangshi">
						<image src="../../static/image/zhifubaologo.png" mode="" class="logo"></image>
						<view class="logotext" >支付宝支付</view>
						<view class="yuanquanselecct" v-if="zhifutype=='zhifubao'">
							<view class="xiaoyuan"></view>
						</view>
						<view class="yuanquan" v-else></view>
					</view>
					<view class="uni-flex zhifufangshi">
						<image src="../../static/image/weixinlogo.png" mode="" class="logo"></image>
						<view class="logotext" >微信支付</view>
						<view class="yuanquanselecct" v-if="zhifutype=='weixin'">
							<view class="xiaoyuan"></view>
						</view>
						<view class="yuanquan" v-else></view>
					</view>
				</view>
				<view class="" style="padding:0 54rpx 80rpx;">
					<submitButtom text="提交订单" :buttonMethod="submit"></submitButtom>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>
<script>
	import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		name : "bottomSheet",
		components:{
			submitButtom
		},
		props: {
			isShowBottom : Boolean,
			zhifutype:{
				type:String,
				default:"zhifubao"
			}
		},
		methods: {
			closeSheet(){					
				this.$emit('closeBottom');
			},
			stopEvent(){						//@click.stop防止事件冒泡
				
			},
			moveHandle(){						//不让页面滚动
				
			},
			submit:function(){
				this.closeSheet();
			}
		}
	}
</script>

<style>
	.xiaoyuan{
		width: 20rpx;
		height: 20rpx;
		background-color: #FFFFFF;
		border-radius: 40px;
		
	}
	.yuanquan{
		background-color: #FFFFFF;
		width: 40rpx;
		height: 40rpx;
		border-radius: 80rpx;
		border:2rpx solid rgba(151,151,151,1);
		margin-top: 14rpx;
	}
	.yuanquanselecct{
		background-color: #3291F8;
		width: 40rpx;
		height: 40rpx;
		border-radius: 80px;
		margin-top: 14rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logotext{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(52,52,52,1);
		line-height:40rpx;
		padding-top: 16rpx;
		flex: 1;
	}
	.logo{
		width: 68rpx;
		height: 68rpx;
		margin-right: 24rpx;
	}
	.title{
		height:44rpx;
		font-size:32rpx;
		font-weight:500;
		color:rgba(52,52,52,1);
		line-height:44rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
	}
	.zhifufangshi{
		padding: 36rpx 40rpx 36rpx 0;
		border-bottom: 4rpx #E8E8E8 solid;
	}
	/* sheet弹窗 */
	.sheet{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 120%;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		background:rgba(0,0,0,0.3);
		z-index: 10000;
	}
	
	/* 显示时候的动画默认0.5s */
	.sheetView{
		width: 100%;
		height: 0upx;
		position: absolute;
		bottom: 0upx;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
	}
	.sheetShow{
		top:0upx !important;
	}
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide{
		top:120% !important;
		transition: all 0.5s;		
	}
	
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active{
		height: 600rpx;
	}
	
</style>
